<div class="panel panel-default" style="margin-bottom:0px;" id="{{indicator.code}}">
        <div class="panel-heading" role="tab" style="padding:0px;" [ngClass]="{'expandedBorderBottom': expanded == true, 'expanded-event-header': expanded === true}">
            <span class="panel-title row" style="margin: 0px;">
                <a #panelLink *ngIf="canExpand == true" href="{{'#collapse'+ indicatorIndex}}" (click)='collapseToggle()' data-toggle="collapse"
                    class="accordion-toggle collapsed col-md-1 expandLink">&nbsp;</a>
                <span (click)='clickToToggle()' class="tableRow" [ngClass]="{'col-md-11 expandable': canExpand == true, 'col-md-12': canExpand !== true}">
                    <div class="col-md-3 rowHeader">
                        <span class="row" style="margin:0px">
                            <a *ngIf="!canExpand" [routerLink]="['../mei', indicator.externalId, indicator.type]">
                                <span *ngIf="indicator.externalId !== undefined" class="col-md-2" style="padding:0px;">
                                    <img [src]="resourcesUrl + '/' + (indicator.type == 'IdiosyncraticIssue' ? 999 : indicator.externalId) + '_black_large.png'" height="36" />
                                </span>
                                <div [ngClass]="{'col-md-10': indicator.externalId !== undefined }" style="padding-right: 0px;">
                                    {{ indicator.name }}
                                </div>
                            </a>
    
                            <div *ngIf="!canExpand" [ngClass]="{'col-md-10': indicator.externalId !== undefined }" style="padding-right: 0px;">
                                <div class="issue-label" *ngIf="indicator.isMain">
                                    Key Issue
                                </div>
    
                                <div *ngIf="indicator.events">                                
                                    <div *ngFor="let event of indicator.events" 
                                    [routerLink]="['../mei', indicator.externalId, indicator.type]" fragment="{{getUrlFriendlyName(event.code)}}" 
                                    style="font-size:8pt;margin-bottom:5px;cursor: pointer;">                                    
                                        <img [src]="resourcesUrl + '/icon_event_cat_' + event.category + '_small.png'" height="16" /> {{event.categoryText}}: {{event.name}}                                    
                                    </div>
                                </div>
                            </div>
    
                            <div *ngIf="canExpand">
                                <span *ngIf="indicator.externalId !== undefined" class="col-md-2" style="padding:0px;">
                                    <img [src]="resourcesUrl + '/' + indicator.externalId + '_black_large.png'" height="36" />
                                </span>
                                <span [ngClass]="{'col-md-10': indicator.externalId !== undefined }" style="padding-right: 0px;">{{indicator.name}}</span>
                            </div>
                        </span>
                        <span *ngIf="subTitle" class="row" style="margin:40px 0 0 0; font-size:9pt; display: block">
                            <b>{{subTitle}}</b>
                        </span>
                    </div>
                    <div class="col-md-9 borderLeft chartCell">
                        <div class="chartCell" *ngFor="let column of columns; let i = index" [ngClass]="{'highlightCell': column.highlight, 'col-md-3':columns.length === 4, 'col-md-4':columns.length === 3, 'borderLeft':i > 0}"
                            style="padding-left:0px;">                        
                            <div *ngIf="column.showChart" issueChart [chartID]="column.valueField + '_' + indicatorIndex" [chartData]="indicator[column.valueField].value"
                                [chartLimit]="indicator[column.valueField].average" [showAxis]="showAxis" [color]="column.chartColor"
                                [maxRating]="column.maxRating" [limitImage]="column.limitImage" class="col-md-6 issueChart">
                                <div id="{{column.valueField + '_' + indicatorIndex}}" class='issuesChart'></div>
                            </div>
                            <div *ngIf="column.showChart" class="col-md-6 issueRating">
                                <span *ngIf="column.showRating" [ngClass]="{'boldRating': column.boldRating}"> 
                                    {{formatValue(indicator, column)}}
                                </span>
                                <span *ngIf="indicator[column.valueField].clusterName" [ngClass]="{'boldRating': column.boldRating}">
                                    {{indicator[column.valueField].clusterName}}
                                </span>
                            </div>
    
                            <div *ngIf="!column.showChart">
                                <div style="padding-left: 20px; padding-top: 3px;">
                                    <span *ngIf="column.showRating" [ngClass]="{'boldRating': column.boldRating}">                                                                                                       
                                        {{formatValue(indicator, column)}}                                    
                                    </span>
                                    <span *ngIf="indicator[column.valueField].clusterName" [ngClass]="{'boldRating': column.boldRating}">
                                        {{indicator[column.valueField].clusterName}}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </span>
            </span>
        </div>
        <div id="{{'collapse'+ indicatorIndex}}" class="panel-collapse collapse">
            <div class="panel-body expanded-event">
                <div class="row" style="padding: 5px 10px">
                    <div class="col-sm-6">
                        <div style="font-size: 1.2em;float:left">
                            <strong>
                                <span *ngIf="displayCode">{{ indicator.code | strReplace:'_':'.' }} </span>
                                {{ indicator.name }}
                            </strong>
                        </div>
                        <img class="pull-right" width="40" [src]="resourcesUrl + '/' + indicator.code + '.png'" >
                    </div>
                    <div class="col-sm-6">
                        <div class="row" *ngIf="indicator.weightedScore">
                            <div class="col-sm-3">
                                <span style="font-size: 1.4em;">
                                    {{ indicator.score.value | number:'1.0-0' }}
                                </span>
                                <div>Raw Score</div>
                            </div>
                            <div class="col-sm-1">
                                <span style="font-size: 1.2em;">x</span>
                            </div>
                            <div class="col-sm-2">
                                <span>{{ indicator.weight.value | number:'1.1-2' }}%</span>
                                <div>Weight</div>
                            </div>
                            <div class="col-sm-1">
                                <span style="font-size: 1.2em;">=</span>
                            </div>
                            <div class="col-sm-4">
                                <span>{{ indicator.weightedScore.value | number:'1.1-1' }}</span>
                                <div>Weighted Score</div>
                            </div>
                        </div>
                    </div>
                </div>
    
                <div class="row" style="padding: 5px 10px" *ngIf="pillarDetails != undefined">
                    <div class="col-sm-6">
                        <p [innerHtml]="pillarComment"></p>
                    </div>
                    <div class="col-sm-6">
                        <div class="row borderBottomDashed">
                            <b>Indicators</b>
                            <b class="pull-right">Score</b>                            
                        </div>
                        <div *ngFor="let indicator of pillarDetails.indicators" class="row borderBottomDashed">
                            {{indicator.name}}
                            <span class="pull-right">
                                {{indicator.score}}
                            </span>
                        </div>
                    </div>
                </div>
           </div>
        </div>
    </div>